<script setup lang="ts">
import {
  Button,
  Popconfirm,
  Table,
  InputNumber
} from "ant-design-vue";
import {defineEmits, ref} from "vue";

import {Page, useVbenModal} from "@vben/common-ui";



type EmitEvents = {
  pushData: {};
};
const emit = defineEmits<EmitEvents>();

const  selectRows=ref([])

const columns1:any = [
  {title: '采购单号', dataIndex: 'caigou_id', key: 'caigou_id', align: 'center',},
  {title: '手工单号', dataIndex: 'purchase_sn', key: 'purchase_sn', align: 'center',},
  {title: '采购日期', dataIndex: 'purchase_date', key: 'purchase_date', align: 'center',},
  {title: '交期', dataIndex: 'dead_line', key: 'dead_line', align: 'center',},
  {title: '物料名称', dataIndex: 'material', key: 'material', align: 'center',},
  {title: '单价', dataIndex: 'price', key: 'price', align: 'center',},
  {title: '下单数量', dataIndex: 'purchase_num', key: 'purchase_num', align: 'center',},
  {title: '收料数量', dataIndex: 'reviced_num', key: 'reviced_num', align: 'center',},
  {title: '已发数量', dataIndex: 'send_num', key: 'send_num', align: 'center',},
  {title: '可退数量', dataIndex: 'stock_num', key: 'stock_num', align: 'center',},
  {title: '本次分配数量', dataIndex: 'num', key: 'num', align: 'center',},
  {title: '操作', dataIndex: 'action', key: 'action', align: 'center',},
]

const [Modal, modalApi] = useVbenModal({
  class: 'w-2/3',
  appendToMain: true,
  closeOnClickModal:false,
  showCancelButton: false,
  onCancel() {
    // emit('pushData', selectRows.value);
    modalApi.close()
  },
  async onConfirm() {
    emit('pushData', selectRows.value);
    modalApi.close()
  },
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return
    const {data} = modalApi.getData<Record<string, any>>()
    console.log('onOpenChange', data)
    selectRows.value = data
  }
})


function delRow(index:any){
  selectRows.value.splice(index,1)
}

</script>

<template>
  <Modal title="查看退料配置明细">
    <Page>

      <Table  class="w-fill"  bordered :data-source="selectRows" :columns="columns1" :pagination="false"  size="small">
        <template #bodyCell="{ column, record,index }">
          <template v-if="column.dataIndex === 'material'">
            {{ record.material_name }}-{{ record.color_name }}-{{ record.SupplyNa }}
          </template>
          <template v-if="column.dataIndex === 'num'">
            <InputNumber v-model:value="record.num"></InputNumber>
          </template>

          <template v-if="column.dataIndex === 'action'">
            <Popconfirm title="确定取消绑定吗？"  ok-text="确认" cancel-text="取消"  @confirm="delRow(index)">
              <Button danger type="primary"> 解除绑定</Button>
            </Popconfirm>

          </template>

        </template>
      </Table>
    </Page>
  </Modal>

</template>

<style scoped>

</style>
